<template>
    <div class="security">
        <div class="category">
            <img src="../../../assets/centre.png" @click="toggleCategory()"/>
            <img src="../../../assets/securityMapIpad.png" v-if="categoryShow" />
            <router-link :to="{name: 'ipad/guardThroughTrain'}" v-if="categoryShow">
                <img src="../../../assets/guardThroughTrainIpad.png"/>
            </router-link>
            <router-link :to="{name: 'ipad/activityStatistics'}" v-if="categoryShow">
                <img src="../../../assets/activityStatisticsIpad.png"/>
            </router-link>
            <router-link :to="{name: 'ipad/guardianHouse'}" v-if="categoryShow">
                <img src="../../../assets/guardianHouseIpad.png"/>
            </router-link>
        </div>
        <div class="carousel">
            <el-carousel height="533px" :interval="6000">
                <el-carousel-item v-for="item in carouselList" :key="item.id">
                    <img :src="item.url" width="100%" height="100%"/>
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="security-content">
            <p class="security-content-title">天生卫士服务平台</p>
            <ul class="security-content-nav clear-float">
                <li v-for="item in tabList" :key="item.id" class="fl" @click="switchTab(item.name)" :class="isActive==item.name?'active':''">
                    {{item.name}}
                </li>
            </ul>
            <div class="statistics"  id="total-statistics" v-show="isActiveShow">
                <div v-if="!pieNameList.length">暂无数据</div>
            </div>
            <div class="company-ranking" v-show="isCompanyShow">
                <div class="common-table">
                    <table>
                        <thead>
                        <tr>
                            <th>排名</th>
                            <th>单位</th>
                            <th>积分</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(item,index) in companyList" :key="item.id" v-if="index<10">
                            <td>{{index+1}}</td>
                            <td class="w250" :title="item.company">{{item.company}}</td>
                            <td>{{item.integralYear?item.integralYear:0}}</td>
                        </tr>
                        <tr v-if="!companyList.length">
                            <td colspan="3">暂无数据</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="guard-ranking" v-show="isGuardShow">
                <div class="common-table">
                    <table>
                        <thead>
                        <tr>
                            <th>卫士姓名</th>
                            <th>单位</th>
                            <th>积分</th>
                            <th>等级</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(item,index) in userList" v-if="index<10" :key="item.id">
                            <td class="w100" >{{item.name}}</td>
                            <td class="w180">{{item.company}}</td>
                            <td>{{item.integralYear?item.integralYear:0}}</td>
                            <td>
                                <img :src="'/images/'+item.levelIcon+'.png'"/>
                            </td>
                        </tr>
                        <tr v-if="!userList.length">
                            <td colspan="4">暂无数据</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</template>

<script src="./securityMap.js"></script>

<style scoped lang="less">
    @import "../../../common/less/common.less";
    @import "securityMap.less";
</style>
